import {Color} from '../color';
import {Plugin} from '../extend';
import {LchaColor} from '../type';
import {parseLcha, rgbaToLcha, roundLcha} from '../color/model/lch';
import {parseLchaText, rgbaToLchaText} from '../color/model/lch-text';

declare module '../color' {
    interface Color {
        /**
         * Converts a color to CIELCH (Lightness-Chroma-Hue) color space and returns an object.
         * https://lea.verou.me/2020/04/lch-colors-in-css-what-why-and-how/
         * https://en.wikipedia.org/wiki/CIELAB_color_space#Cylindrical_model
         */
        toLch(): LchaColor;

        /**
         * Converts a color to CIELCH (Lightness-Chroma-Hue) color space and returns a string.
         * https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/lch()
         */
        toLchString(): string;
    }
}

/**
 * A plugin adding support for CIELCH color space.
 * https://lea.verou.me/2020/04/lch-colors-in-css-what-why-and-how/
 * https://en.wikipedia.org/wiki/CIELAB_color_space#Cylindrical_model
 */
const lchPlugin: Plugin = (ColorClass: typeof Color, parsers): void => {
    ColorClass.prototype.toLch = function() {
        return roundLcha(rgbaToLcha(this.rgba));
    };

    ColorClass.prototype.toLchString = function() {
        return rgbaToLchaText(this.rgba);
    };

    parsers.string.push([parseLchaText, 'lch']);
    parsers.object.push([parseLcha, 'lch']);
};

export default lchPlugin;
